<script setup>
import router from '@/router';
import { onMounted, ref } from 'vue'
import axios from 'axios';
import { Search } from '@element-plus/icons-vue'

const logon = ref(false)
const isLogon = () =>{
  if(localStorage.getItem('token') == null){
    logon.value = true
  }else{
    logon.value = false
  }
}

const id = localStorage.getItem('token')
const userInfo  = ref([])
const getUserInfo = () => {
  axios.get(`http://localhost:3000/TbUserinfoController/getUserinfoById/${id}`).then(res=>{
    console.log(res);
    userInfo.value = res.data.data
  })
}

const gotostuinfo = () => {
  if(userInfo.value.status == '1'){
  router.push({
    path:'/teainfo'
  })
}else{
  router.push({
    path:'/stuinfo'
  })
}
}

const input = ref('')
const SearchInfo = () => {
  router.push({
    path:'/search',
    query:{string:input.value}
  }).then(() =>{
    window.location.reload()
  })
}

onMounted(()=>{
  isLogon()
  getUserInfo()
})

</script>
<template >
  <div>
    <div class="header">
      <div class="box">
        <h1>
          <img src="../assets/logo2.png">
          <span>Learning Assistant Star</span>
        </h1>
         <el-input
      v-model="input"
      style="width: 240px; height: 32px;"
      size="large"
      placeholder="搜一搜 发现更多"
      :suffix-icon="Search"
      @keydown.enter.native="SearchInfo"
    />
      </div>
      <nav v-if="logon">
          <router-link active-class="active" to="/userRegister">注册</router-link>
          <router-link active-class="active" to="/UserLogin">登录</router-link>
        </nav>
      <div class="ider" v-else>
        <el-avatar 
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" @click="gotostuinfo"
        />
      </div>
    </div>
    <link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
  </div>
</template>
<style scoped>
.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 65px;
  background-color: #79bbff;
  color: #ffffff;
  cursor: pointer;
  position: fixed;
  top: -5px;
  width: 100%;
  z-index: 1000;
}
.box{
  display: flex;
  align-items: center;
}
h1{
  display: flex;
  align-items: center;
  font: normal 28px Cookie, Arial, Helvetica, sans-serif;
  padding: 0px 20px;
}
img{
  width: 60px;
  height: 60px;
}

nav {
  display: flex;
  align-items: center;
  margin: 0px 60px;

}
nav a{
  padding: 0 15px;
  width: 32px;
  text-decoration:none;
  color: #ffffff;
  font-size: 16px;
  font-weight: normal;
  opacity: 0.9;
}

nav a:hover {
  opacity: 1;
}

.ider{
  display: flex;
  align-items: center;
  margin-right: 70px;
}
.active {
  color: black;
  pointer-events: none;
  opacity: 1;
}

/*搜索框*/

.text{
  height: 22px;
  font-size: 14px;
  border: 1px solid #ccc;
  padding: 3px 16px;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;

}
.text:focus{
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
.button{
  width: 60px;
  height: 30px;
  font-size: 14px;
  margin-right: 35px;
  border: 1px solid cornflowerblue;
  background-color: cornflowerblue;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.contents{
  display: flex;
  justify-content: center;
}
.content{
  display: flex;
  width: 1400px;
  height: 1400px;
  /*background-color: #f0f2f3;*/
}


</style>